<template>
  <div class="log-container">
    <!-- 面包屑导航 -->
    <div class="breadcrumb">
      <span>系统管理 / 系统日志 /</span>
    </div>

    <!-- 搜索区域 -->
    <div class="search-area">
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="操作人：">
          <el-input v-model="searchForm.operateUserName" placeholder="请输入操作人姓名" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">搜索</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 表格区域 -->
    <div class="table-area">
      <el-table :data="logList" style="width: 100%" height="calc(100vh - 300px)" stripe>
        <el-table-column type="index" label="序号" width="80"></el-table-column>
        <el-table-column prop="operateUserName" label="操作人" min-width="120"></el-table-column>
        <el-table-column prop="operateTime" label="操作时间" min-width="180">
          <template #default="scope">
            {{ formatDateTime(scope.row.operateTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="className" label="类名" min-width="250"></el-table-column>
        <el-table-column prop="methodName" label="方法名" min-width="150"></el-table-column>
        <el-table-column prop="methodParams" label="方法参数" min-width="200"></el-table-column>
        <el-table-column prop="returnValue" label="返回值" min-width="200"></el-table-column>
        <el-table-column prop="costTime" label="耗时(ms)" width="100"></el-table-column>
        <el-table-column label="操作" min-width="80">
          <template #default="scope">
            <el-button type="text" size="small" @click="viewDetail(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页区域 -->
    <div class="pagination-area">
      <div class="pagination-info">
        共 {{ total }} 条记录
      </div>
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </div>

    <!-- 日志详情对话框 -->
    <el-dialog
      v-model="detailDialogVisible"
      title="日志详情"
      width="800px"
      :before-close="handleCloseDetailDialog"
    >
      <div class="log-detail">
        <el-descriptions border :column="1">
          <el-descriptions-item label="ID">{{ selectedLog.id || '-' }}</el-descriptions-item>
          <el-descriptions-item label="操作人ID">{{ selectedLog.operateUserId || '-' }}</el-descriptions-item>
          <el-descriptions-item label="操作人">{{ selectedLog.operateUserName || '-' }}</el-descriptions-item>
          <el-descriptions-item label="操作时间">{{ formatDateTime(selectedLog.operateTime) || '-' }}</el-descriptions-item>
          <el-descriptions-item label="类名">{{ selectedLog.className || '-' }}</el-descriptions-item>
          <el-descriptions-item label="方法名">{{ selectedLog.methodName || '-' }}</el-descriptions-item>
          <el-descriptions-item label="方法参数">{{ selectedLog.methodParams || '-' }}</el-descriptions-item>
          <el-descriptions-item label="返回值">{{ selectedLog.returnValue || '-' }}</el-descriptions-item>
          <el-descriptions-item label="耗时(ms)">{{ selectedLog.costTime || '-' }}</el-descriptions-item>
        </el-descriptions>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleCloseDetailDialog">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { getLogList } from '@/api/log'

export default {
  name: 'LogView',
  data() {
    return {
      // 搜索表单
      searchForm: {
        operateUserName: ''
      },
      // 日志列表数据
      logList: [],
      // 分页信息
      currentPage: 1,
      pageSize: 10,
      total: 0,
      // 详情对话框
      detailDialogVisible: false,
      selectedLog: {}
    }
  },
  mounted() {
    // 初始加载日志数据
    this.loadLogs()
  },
  methods: {
    // 格式化日期时间
    formatDateTime(dateTime) {
      if (!dateTime) return '-'
      const date = new Date(dateTime)
      if (isNaN(date.getTime())) return dateTime
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      const hours = String(date.getHours()).padStart(2, '0')
      const minutes = String(date.getMinutes()).padStart(2, '0')
      const seconds = String(date.getSeconds()).padStart(2, '0')
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
    },
    // 加载日志数据
    async loadLogs() {
      try {
        const params = {
          page: this.currentPage,
          pageSize: this.pageSize,
          ...this.searchForm
        }
        
        const response = await getLogList(params)
        
        if (response.code === 1) {
          this.logList = response.data.rows || []
          this.total = response.data.total || 0
        } else {
          this.$message.error(response.msg || '获取日志列表失败')
          this.logList = []
          this.total = 0
        }
      } catch (error) {
        this.$message.error('获取日志列表失败，请稍后重试')
        this.logList = []
        this.total = 0
      }
    },
    // 搜索
    search() {
      this.currentPage = 1
      this.loadLogs()
    },
    // 重置搜索
    resetSearch() {
      this.searchForm = {
        operateUserName: ''
      }
      this.search()
    },
    // 查看详情
    viewDetail(row) {
      this.selectedLog = { ...row }
      this.detailDialogVisible = true
    },
    // 关闭详情对话框
    handleCloseDetailDialog() {
      this.detailDialogVisible = false
      this.selectedLog = {}
    },
    // 分页大小变化
    handleSizeChange(val) {
      this.pageSize = val
      this.loadLogs()
    },
    // 当前页码变化
    handleCurrentChange(val) {
      this.currentPage = val
      this.loadLogs()
    }
  }
}
</script>

<style scoped>
.log-container {
  padding: 20px;
}

.breadcrumb {
  margin-bottom: 20px;
  font-size: 16px;
  color: #333;
}

.search-area {
  background-color: #f5f7fa;
  padding: 20px;
  border-radius: 4px;
  margin-bottom: 20px;
}

.search-form {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.search-form .el-form-item {
  margin-right: 15px;
  margin-bottom: 15px;
}

.table-area {
  margin-bottom: 20px;
}

.pagination-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pagination-info {
  color: #606266;
}

.log-detail {
  max-height: 400px;
  overflow-y: auto;
}
</style>